﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ContextMenu DataGrid右键菜单</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
        
</head>
<body>
    <h1>ContextMenu DataGrid右键菜单</h1>         
    
    <div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
        url="../data/AjaxService.jsp?method=SearchEmployees"  idField="id"
        contextMenu="#gridMenu" headerContextMenu="#headerMenu"
    >
        <div property="columns">
            <div type="indexcolumn" ></div>
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
            <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
            <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
            <div field="salary" width="100" allowSort="true">薪资</div>                                    
            <div field="age" width="100" allowSort="true">年龄</div>
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
        </div>
    </div>    

    <ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">              
        <li name="add" iconCls="icon-add" onclick="onAdd">新增</li>
	    <li name="edit" iconCls="icon-edit" onclick="onEdit">编辑节点</li>
	    <li name="remove" iconCls="icon-remove" onclick="onRemove">删除节点</li>        
    </ul>
    <ul id="headerMenu" class="mini-contextmenu">              
        <li name="config" >配置列</li>
	    <li name="frozen" iconCls="icon-lock" >锁定列</li>
	    <li name="groupby" >分组汇总</li>        
    </ul>
    <div style="padding-top:5px;color:red;">Note：
        <ol>
            <li>禁止右键菜单：第一行记录不显示右键菜单</li>
            <li>隐藏菜单项：第二行记录，隐藏“编辑”菜单项</li>
            <li>禁用菜单项：第二行记录，禁用“删除”菜单项</li>            
            <li>headerContextMenu设置表格头部菜单</li>        
        </ol>
    </div>

    <script type="text/javascript">
        mini.parse();
        
        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("loginname", "desc");

        function applySort() {
            var sortField = document.getElementById("sortField").value;
            var sortOrder = document.getElementById("sortOrder").value;
            grid.sortBy(sortField, sortOrder);
        }        
        
        ///////////////////////////////////////////////////////       
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }

function onBeforeOpen(e) {
    var grid = mini.get("datagrid1");
    var menu = e.sender;
            
    var row = grid.getSelected();
    var rowIndex = grid.indexOf(row);            
    if (!row ||  rowIndex== 0) {
        e.cancel = true;
        //阻止浏览器默认右键菜单
        e.htmlEvent.preventDefault();
        return;
    }
    ////////////////////////////////
    var editItem = mini.getbyName("edit", menu);
    var removeItem = mini.getbyName("remove", menu);
    editItem.show();
    removeItem.enable();

    if (rowIndex == 1) {
        editItem.hide();
    }
    if (rowIndex == 1) {
        removeItem.disable();
    }

}

        function onAdd(e) {
            alert("新增记录");
        }
        function onEdit(e) {
            var row = grid.getSelected();
            if (row) {
                alert("编辑："+row.loginname)
            }             
        }
        function onRemove(e) {
            var row = grid.getSelected();
            if (row) {
                alert("删除：" + row.loginname)
            }   
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>
</body>
</html>